<template>
  <div class="box">
    <redBox v-show="fag"></redBox>
    <button @click="onBn()">点击</button>
  </div>
</template>

<script>
import redBox from './components/redBox.vue'

export default {
  name: 'App',
  components: {
    redBox
  },
  data () {
    return {
      user: { name: 'zhangsan' },
      fag: false
    }
  },
  methods: {
    fn () {
      console.log("-----------------fn");
    },
    onBn () {
      if (this.fag) {
        this.fag = false
      } else {
        this.fag = true
      }
    }
  },

  beforeCreate () {
    console.log("-----app-----beforeCreate----------");
    console.log(this.user);
    // this.fn()
  },
  created () {
    console.log("-----app-----created----------");
    console.log(this.user);
    this.fn();
  },
  beforeMount () {
    console.log("-----app-----beforeMount----------");
    var app = document.querySelector('.box');
    console.log(app);
  },
  mounted () {
    console.log("-----app-----mounted----------");
    var app = document.querySelector('.box');
    console.log(app);
  },


  beforeUpdate () {
    console.log("-----app-----beforeUpdate----------");
  },
  updated () {
    console.log("----app------updated----------");
  },
  beforeDestroy () {
    console.log("-----app-----beforeDestroy----------");
  },
  destroyed () {
    console.log("------app----destroyed----------");
  }
}
</script>

<style lang="less">
</style>
